<script setup>
import ButtonCounter from './ButtonCounter.vue'
import AlertBox from './AlertBox.vue'
import BlogPost from './BlogPost.vue'

import { useTemplateRef, onMounted, ref } from 'vue'

const btn1 = useTemplateRef('btn1');

onMounted(() => {
    console.log(btn1);
    btn1.value.btnName = 'test2222'
});

/* 动态赋值 */
const posts = ref([
    { id: 1, title: 'My journey with Vue' },
    { id: 2, title: 'Blogging with Vue' },
    { id: 3, title: 'Why Vue is so fun' }
])

const postFontSize = ref(1)

</script>

<template>

    <div>
        <div>
            <h1>ButtonCounter子组件</h1>
            <ButtonCounter btnName="test" ref="btn1" />
            <br />
            <button-counter btnName="test2" />
        </div>

        <br />

        <div>
            <h1>AlertBox子组件 slot 插槽动态实现文字描述</h1>
            <AlertBox>
                Something bad happened.
            </AlertBox>
        </div>

        <br />
        <div>
            <h1>BlogPost子组件</h1>
            <BlogPost title="My journey with Vue" />
            <BlogPost title="Blogging with Vue" />
            <BlogPost title="Why Vue is so fun" />
        </div>
        <br />
        <div>
            <h1>BlogPost子组件动态</h1>
            <div :style="{ fontSize: postFontSize + 'em' }">
                <BlogPost v-for="post in posts" :key="post.id" :title="post.title" />
                <BlogPost title="单击我缩小DIV字体" @enlarge-text="postFontSize -= 0.1" />
                <BlogPost title="单击我放大DIV字体" @enlarge-text="postFontSize += 0.1" />
            </div>
        </div>

    </div>

</template>